<script setup lang='ts'>
import { useStatistics } from '@fl/api/fangjiaohui'
import { ElCard, ElIcon, ElRow } from 'element-plus'

function getSetting(val?: string) {
    const firstChild = val?.[0]
    if (firstChild === '+') {
        return {
            color: '#DA0004',
            icon: 'Top',
        }
    }
    if (firstChild === '-') {
        return {
            color: '#3BB346',
            icon: 'Down',
        }
    }
    return {
        color: '#1D2129',
        icon: '',
    }
}
const { data, isLoading } = useStatistics()
</script>

<template>
    <el-skeleton v-if="isLoading"
                 :rows="5"
    />

    <ElRow v-else
           :gutter="20"
           justify="space-between"
    >
        <ElCol :xl="6"
               :lg="6"
               :md="12"
               :sm="12"
               :xs="24"
        >
            <ElCard shadow="hover"
                    class="mb-20px text-#1D2129 "
            >
                <div class="relative text-16 line">
                    <div>今日预约</div>

                    <img src="@fl/assets/svgs/reservation-information1.svg"
                         class="absolute right-0 top-50% w-40 h-40 translate-y--50%"
                    >
                </div>

                <div class="font-bold text-32 my-15">
                    {{ data?.todayReservationCount ?? 0 }}
                </div>

                <div class="flex justify-between text-14">
                    <div class="text-#86909C">
                        同比昨日
                    </div>

                    <div class="flex items-center"
                         :style="{ color: getSetting(data?.todayReservationComparedYesterdayPercentage).color }"
                    >
                        <div class="mr-10">
                            {{ data?.todayReservationComparedYesterdayPercentage ?? 0 }}
                        </div>

                        <ElIcon v-if="getSetting(data?.todayReservationComparedYesterdayPercentage).icon">
                            <CaretTop v-if="getSetting(data?.todayReservationComparedYesterdayPercentage).icon === 'Top'" />

                            <CaretBottom v-if="getSetting(data?.todayReservationComparedYesterdayPercentage).icon === 'Down'" />
                        </ElIcon>
                    </div>
                </div>
            </ElCard>
        </ElCol>

        <ElCol :xl="6"
               :lg="6"
               :md="12"
               :sm="12"
               :xs="24"
        >
            <ElCard shadow="hover"
                    class="mb-20px text-#1D2129 "
            >
                <div class="text-16 line relative">
                    <div>累计预约</div>

                    <img src="@fl/assets/svgs/reservation-information2.svg"
                         class="absolute right-0 top-50% w-40 h-40 translate-y--50%"
                    >
                </div>

                <div class="font-bold text-32 my-15">
                    {{ data?.totalReservationCount ?? 0 }}
                </div>

                <div class="flex justify-between text-14">
                    <div class="text-#86909C">
                        同比昨日
                    </div>

                    <div class="flex items-center"
                         :style="{ color: getSetting(data?.totalReservationCountComparedYesterdayPercentage).color }"
                    >
                        <div class="mr-10">
                            {{ data?.totalReservationCountComparedYesterdayPercentage ?? 0 }}
                        </div>

                        <ElIcon v-if="getSetting(data?.totalReservationCountComparedYesterdayPercentage).icon">
                            <CaretTop v-if="getSetting(data?.totalReservationCountComparedYesterdayPercentage).icon === 'Top'" />

                            <CaretBottom v-if="getSetting(data?.totalReservationCountComparedYesterdayPercentage).icon === 'Down'" />
                        </ElIcon>
                    </div>
                </div>
            </ElCard>
        </ElCol>

        <ElCol :xl="6"
               :lg="6"
               :md="12"
               :sm="12"
               :xs="24"
        >
            <ElCard shadow="hover"
                    class="mb-20px text-#1D2129 "
            >
                <div class=" relative text-16 line">
                    <div>今日成交备案套数</div>

                    <img src="@fl/assets/svgs/reservation-information3.svg"
                         class="absolute right-0 top-50% w-40 h-40 translate-y--50%"
                    >
                </div>

                <div class="font-bold text-32 my-15">
                    {{ data?.todayDealAndFilingCount ?? 0 }}
                </div>

                <div class="flex justify-between text-14">
                    <div class="text-#86909C">
                        同比昨日
                    </div>

                    <div class="flex items-center"
                         :style="{ color: getSetting(data?.todayDealAndFilingCountComparedYesterdayPercentage).color }"
                    >
                        <div class="mr-10">
                            {{ data?.todayDealAndFilingCountComparedYesterdayPercentage ?? 0 }}
                        </div>

                        <ElIcon v-if="getSetting(data?.todayDealAndFilingCountComparedYesterdayPercentage).icon">
                            <CaretTop v-if="getSetting(data?.todayDealAndFilingCountComparedYesterdayPercentage).icon === 'Top'" />

                            <CaretBottom v-if="getSetting(data?.todayDealAndFilingCountComparedYesterdayPercentage).icon === 'Down'" />
                        </ElIcon>
                    </div>
                </div>
            </ElCard>
        </ElCol>

        <ElCol :xl="6"
               :lg="6"
               :md="12"
               :sm="12"
               :xs="24"
        >
            <ElCard shadow="hover"
                    class="mb-20px text-#1D2129 "
            >
                <div class="relative text-16 line">
                    <div>累计成交备案套数</div>

                    <img src="@fl/assets/svgs/reservation-information4.svg"
                         class="absolute right-0 top-50% w-40 h-40 translate-y--50%"
                    >
                </div>

                <div class="font-bold text-32 my-15">
                    {{ data?.totalDealAndFilingCount ?? 0 }}
                </div>

                <div class="flex justify-between text-14">
                    <div class="text-#86909C">
                        同比昨日
                    </div>

                    <div class="flex items-center"
                         :style="{ color: getSetting(data?.totalDealAndFilingCountComparedYesterdayPercentage).color }"
                    >
                        <div class="mr-10">
                            {{ data?.totalDealAndFilingCountComparedYesterdayPercentage ?? 0 }}
                        </div>

                        <ElIcon v-if="getSetting(data?.totalDealAndFilingCountComparedYesterdayPercentage).icon">
                            <CaretTop v-if="getSetting(data?.totalDealAndFilingCountComparedYesterdayPercentage).icon === 'Top'" />

                            <CaretBottom v-if="getSetting(data?.totalDealAndFilingCountComparedYesterdayPercentage).icon === 'Down'" />
                        </ElIcon>
                    </div>
                </div>
            </ElCard>
        </ElCol>
    </ElRow>
</template>

<style lang="scss" scoped>
@import './index.scss';
</style>
